<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:comps="http://java.sun.com/jsf/composite/comps" >

    <body>

        <ui:composition template="./../../resources/templates/newTemplate.xhtml">

               <ui:define name="left">
                    <comps:admPanel />
               </ui:define>

               <ui:define name="principal">
                <h:outputScript library="javascript" name="util.js" />
                <p:tabView id="tab">
                    <p:tab title="Nuevo">
                        <h:form id="formNuevo">
                            <p:growl id="messages" globalOnly="true" />
                            <h:panelGrid columns="2" cellpadding="5">  
                                <h:outputText value="Nombre" />  
                                <p:inputText id="nombre" value="#{categoria.nombre}" required="true"
                                             requiredMessage="Ingrese Nombre" maxlength="45" />
                                <h:outputText  value="Descripción" />
                                <p:inputText id="descripcion" value="#{categoria.descripcion}" maxlength="45" />
                                <h:outputText  value="Pertenece a:" />
                            </h:panelGrid>  
                            <p:tree id="treeCategoria" value="#{categoria.rootNuevo}" var="node"
                                    selectionMode="single" selection="#{categoria.selectedNode}">  
                                <p:treeNode>  
                                    <h:outputText value="#{node}" />  
                                </p:treeNode>  
                            </p:tree>  
                            <p:commandButton value="Guardar" update="@form :tab:formModificar"
                                             action="#{categoria.registrarNuevaCategoria}" /> 
                        </h:form>
                    </p:tab>
                    <p:tab title="Modificar">  
                        <h:form id="formModificar">
                            <p:growl id="messagesModificar" globalOnly="true" />
                            <p:treeTable id="treeCategoriaModificar" value="#{categoria.rootModificar}" 
                                         var="cat" style="text-align: left" >
                                <p:column>
                                    <f:facet name="header">
                                        <h:outputText value="Nombre"/>
                                    </f:facet>
                                    <h:outputText value="#{cat.nombre}" /> 
                                </p:column> 

                                <p:column>
                                    <f:facet name="header">
                                        <h:outputText value="Descripcion"/>
                                    </f:facet>
                                    <h:outputText value="#{cat.descripcion}" /> 
                                </p:column> 

                                <p:column style="text-align: center">  
                                    <f:facet name="header">
                                        <h:outputText value="Opciones"/>
                                    </f:facet>
                                    <p:commandButton update=":catDialog" oncomplete="dialogoModifCat.show()" 
                                                     icon="ui-icon ui-icon-pencil" title="Modificar" >
                                        <f:setPropertyActionListener value="#{cat}" target="#{categoria.categoriaSeleccionadaModificar}" />
                                        <f:setPropertyActionListener value="#{cat.nombre}" target="#{categoria.nombreM}" />
                                        <f:setPropertyActionListener value="#{cat.descripcion}" target="#{categoria.descripcionM}" />
                                    </p:commandButton>
                                    <p:commandButton oncomplete="confirmacion.show()" 
                                                     icon="ui-icon ui-icon-trash" title="Quitar" >
                                        <f:setPropertyActionListener value="#{cat}" target="#{categoria.categoriaSeleccionadaModificar}" />
                                    </p:commandButton>
                                </p:column>  
                            </p:treeTable>
                        </h:form>
                        <p:confirmDialog message="Esta seguro?" width="200" header="Confirmar"
                                         severity="alert" widgetVar="confirmacion" >
                            <h:form>
                                <p:commandButton value="Si" update=":tab:formModificar :tab:formNuevo" 
                                                 actionListener="#{categoria.borrarCategoria}"
                                                 oncomplete="confirmacion.hide()" />
                                <p:commandButton value="No" onclick="confirmacion.hide()" type="button" />
                            </h:form>    
                        </p:confirmDialog>

                    </p:tab>
                </p:tabView>

                <p:dialog id="dialogo" header="Modificar Categoria" widgetVar="dialogoModifCat" >
                    <h:form id="catDialog">
                        <h:panelGrid columns="3" >
                            <h:outputLabel value="Nombre" />
                            <p:inputText id="nombreModificar" value="#{categoria.nombreM}" required="true"
                                         requiredMessage="Valor requerido"/>
                            <p:message for="nombreModificar" />
                            <h:outputLabel value="Descripcion" />
                            <p:inputText id="descModificar" value="#{categoria.descripcionM}" />
                            <p:message for="descModificar" />
                            <f:facet name="footer" >
                                <p:commandButton value="Guardar" actionListener="#{categoria.modificarCategoria}"
                                                 oncomplete="handleModificarCategoria(xhr, status, args)"
                                                 update="@form :tab:formModificar :tab:formNuevo"/>
                                <p:commandButton value="Limpiar" type="reset" />
                            </f:facet>
                        </h:panelGrid>
                    </h:form>
                </p:dialog>

            </ui:define>

        </ui:composition>

    </body>
</html>
